<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.6.4.min.js"></script>
  <style>
    .active {
      display: inline-block;
      width: 200px;
    }
  </style>
  <script>
    //////////////////////////////////// jQuery
    //////////////////////////////////// 选择器
    //////////////////////////////////// 修改css
    $(".nav").css({
      width: 400,
      height: 400,
      background: "skyblue",
      color: "white",
      opacity: 0.5
    })
    /////////////////////////////////// 修改类
    $(this).addClass("active")
    $(this).removeClass("active")
    $(this).toggleClass("active")
    /////////////////////////////////// 动画效果
    ///////////// 滑动效果
    // speed 速度 (slow,normal,fast)
    // easing (swing ,linear)
    // fn 回调函数
    $(this).show([speed, [easing], [fn]])
    $(this).hide([speed, [easing], [fn]])
    $(this).slideDown([speed, [easing], [fn]])
    $(this).slideUp([speed, [easing], [fn]])
    //1. 事件切换 hover 就是鼠标经过和离开的复合写法
    $(".nav>li").hover(function () {
      $(this).children("ul").stop().slideDown(200);
    }, function () {
      $(this).children("ul").stop().slideUp(200);
    });
    //2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
    // stop方法必须写到动画前面
    $(".nav>li").hover(function () {
      $(this).children("ul").stop().slideToggle(200);
    });

    ////////////淡入淡出
    $("this").click(function () {
      $(this).stop().fadeIn();  // 淡入
    })
    $("this").click(function () {
      $(this).stop().fadeOut();  // 淡出
    })
    $("this").click(function () {
      $(this).stop().fadeToggle();  // 淡入淡出切换
    })
    $("this").click(function () {
      $(this).stop().fadeTo(1000, 0.5);  // 修改透明度  时间和透明度必须写
    })

    ////////////自定义动画
    $("this").click(function () {
      $(this).animate({
        scrollTop: $(this).offset().top,
        easing: "ease-in-out",
        duration: 2000
      }, 500, "linear", function () { });
    })

    ///////////////////////////////////// 属性
    //  element.prop("属性名")  获取属性值
    $("a").prop("title", "hello world")
    // 自定义属性
    $("div").attr("index", 4)
    $("div").attr("data-index", 4)

    //  数据缓存  data() 这个里面的数据是存放在元素的内存里面
    $("span").data("uname", "pink")  // 附加
    console.log($("span").data("uname"))   // 获取


  </script>
</head>

<body>
  <div></div>
  <div class="nav"></div>
  <div class="navr"></div>
  <span></span>
  <p>1</p>
  <ul>
    <li></li>
    <li></li>
    <li class="item"></li>
    <li></li>
    <li></li>
  </ul>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>

  <script>
    //  等着页面 DOM加载完毕再去执行 js代码
    //  $ 等同于 jQuery ,为顶级对象
    $(function () {
      alert('1')
    })
    // 1、DOM对象：原生 js获取的对象
    let myDiv = document.querySelector('.nav')
    // 2、jQuery对象：用 jQuery方式获取过来的对象  本质：通过$把DOM元素进行了包装
    $('div')
    // 3、jQuery对象只能使用 jQuery方法，DOM对象则使用原生的 JavaScript属性和方法
    myDiv.style.display = 'none'
    $('.nav').hide()


    // DOM对象转换为 jQuery对象
    $('myDiv')
    // jQuery对象转换为 DOM对象
    $('div')[0].display = 'none'


    // jQuery常用 API
    // jQuery选择器
    $(function () {
      $(".nav")
      $("ul li")
    })

    // jQuery设置样式
    $("span").css("backgroundColor", "pink")

    // 隐式迭代：把匹配到的所有元素内部进行遍历，给每一个元素添加 css方法
    $("ul li").css("color", "red")

    // 筛选选择器
    $("ul li:first").css("color", "pink")
    // 选择索引号为 2的元素
    $("ul li:eq(2)").css("color", "skyblue")
    // 选择父级  返回最近一级父级元素
    $("li").parent()
    // 选择最近一级子级
    $("ul").children("li")
    // 选择所有的后代
    $("ul").find("li")
    // 选择兄弟元素 siblings选择所有的亲兄弟
    $("ul .item").siblings("li").css("color", "green")

    $("ul li").eq(2).css("color", "green")

    $(function () {
      $("button").click(function () {
        $(this).css("color", "red").siblings().css("color", "green")
        $(this).addClass("active")
      })
    })

    $(".navr").css({
      width: 400,
      height: 400,
      background: "skyblue",
      color: "white",
      opacity: 0.5
    })

    show([speed, [easing], [fn]])
    // speed 速度 (slow,normal,fast)
    // easing swing  linear
    // fn 回调函数

    $("button").eq(1).click(function () {
      $("div").hide("normal", "linear", function () {
        console.log(1)
      });
    })
  </script>
</body>

</html>